<template>
  <t-modal
      :title="title"
      :width="width"
      :visible="visible"
      :footer="null"
      @ok="() => {
			$emit('ok');
		}"
      @cancel="() => {
			$emit('cancel');
		}"
  >
    <div v-if="type === 'preview'">
      <div  style="display: flex;justify-content: space-around;">
        <div class="card-item" @click="cardClick('menu')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("InsidePagePreview","内页预览")}}</div>
            <div class="text">{{$ct("InsidePagePreview","内页预览")}}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('newWindow')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("NewWindowPreview","新窗口预览")}}</div>
            <div class="text">{{$ct("NewWindowPreview","新窗口预览")}}</div>
          </div>
        </div>
      </div>
      <div class="text-center text-bold margin-top-sm">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>{{$ct("InsidePagePreview","内页预览")}}、{{$ct("NewWindowPreview","新窗口预览")}}</span>
          </template>
          <span style="cursor: pointer;">{{$ct("HowToSelect","如何选择")}}？</span>
        </a-tooltip>
      </div>
    </div>
    <div v-else-if="type === 'add'">
      <div style="display: flex;justify-content: space-around;">
        <div class="card-item" @click="cardClick('normalReport')">
          <div class="img-box">
            <img src="~@/assets/img/report01.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("createFromBlank","从空白创建")}}</div>
            <div class="text">{{$ct("BeCreateFromBank","基于空白开始创建")}}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('createTemplate')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("createFromTemplate","从模板创建")}}</div>
            <div class="text">{{$ct("BeCreateFromTemplate","基于模板开始创建")}}</div>
          </div>
        </div>
      </div>
      <div class="text-center text-bold margin-top-sm">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>基于空白开始创建、基于模板开始创建</span>
          </template>
          <span style="cursor: pointer;">{{$ct("HowToSelect","如何选择")}}？</span>
        </a-tooltip>
      </div>
    </div>
    <div v-else-if="type === 'export'">
      <div style="display: flex;justify-content: space-around;">
        <div class="card-item" @click="cardClick('exportPDF')">
          <div class="img-box">
            <img src="~@/assets/img/pdf.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("ExportPDF","导出PDF")}}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('exportWord')">
          <div class="img-box">
            <img src="~@/assets/img/word.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("ExportWord","导出Word")}}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('exportExcel')">
          <div class="img-box">
            <img src="~@/assets/img/excel.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("ExportExcel","导出Excel")}}</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('exportJSON')">
          <div class="img-box">
            <img src="~@/assets/img/JSON.png"/>
          </div>
          <div class="text-box">
            <div class="title">{{$ct("ExportJSON","导出JSON")}}</div>
          </div>
        </div>
      </div>
      <div class="text-center text-bold margin-top-sm">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span></span>
          </template>
          <span style="cursor: pointer;">{{$ct("HowToSelect","如何选择")}}？</span>
        </a-tooltip>
      </div>
    </div>
    <div v-else>
      <div style="display: flex;justify-content: space-around;">
        <div class="card-item" @click="cardClick('normalReport')">
          <div class="img-box">
            <img src="~@/assets/img/report01.png"/>
          </div>
          <div class="text-box">
            <div class="title">绑定内页</div>
            <div class="text">基于空白开始创建</div>
          </div>
        </div>
        <div class="card-item" @click="cardClick('createTemplate')">
          <div class="img-box">
            <img src="~@/assets/img/report02.png"/>
          </div>
          <div class="text-box">
            <div class="title">绑定外页</div>
            <div class="text">基于模板开始创建</div>
          </div>
        </div>
      </div>
      <div class="text-center text-bold margin-top-sm">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>基于空白开始创建、基于模板开始创建</span>
          </template>
          <span style="cursor: pointer;">如何选择？</span>
        </a-tooltip>
      </div>
    </div>
  </t-modal>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      type: {
        type: String,
        require: true
      },
      title: {
        type: String,
        require: true
      },
      width: {
        type: Number | String,
        default: 470
      },
    },
    data() {
      return {};
    },
    created() {

    },
    methods: {
      cardClick(e) {
        this.$emit("click", e)
      }
    }
  };
</script>
<style lang="less" scoped>
  .card-item {
    transition: 0.3s all;
    cursor: pointer;
    width: 181px;
    border: 1px solid #F0F2F5;
    border-radius: 10px;
    padding-bottom: 15px;
    .img-box {
      padding: 40px 20px 20px;
      img {
        width: 100%;
      }
    }
  }

  .card-item:hover {
    transform: scale(1.02);
    border: 1px solid #1890ff;
    box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
  }

  .text-box {
    text-align: center;
    .title {
      font-size: 16px;
      color: #171a1d;
      font-weight: 600;
    }
    .text {
      margin: 5px 0 0;
      font-size: 12px;
      color: rgb(206 206 206);
    }
  }
</style>
